<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实时预定</title>
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/font-awesome.css" rel="stylesheet">
        <link href="/css/datatables.min.css" rel="stylesheet">
        <link href="/css/animate.css" rel="stylesheet">
        <link href="/css/style.css" rel="stylesheet">
        <script src="/js/jquery-3.1.1.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script src="/js/vue.js"></script>
    </head>
    <body style="background-color:whitesmoke">
        <div id="reservation">
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>实时订单表</h2>
                    <ol class="breadcrumb">
                        <li><a href="index.html">已添加订单详情</a></li>
                    </ol>
                </div>
            </div>

            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="ibox-content m-b-sm border-bottom">
                    <div class="row">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class=" col-sm-2 control-label">预定会员名字</label>
                                <div class=" col-sm-2">
                                    <input type="text" class="form-control" v-model="reservationQuery.menberName"
                                           placeholder="请输入会员姓名">
                                </div>
                                <div>
                                    <button class="btn btn-primary btn-sm" type="button" @click="loadData()"><span
                                            class="glyphicon glyphicon-zoom-in"></span> 查询
                                    </button>
                                    <button class="btn btn-primary btn-sm" type="button" @click="add()"><span
                                            class="glyphicon glyphicon-plus"></span> 新增
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true" style="display:none;">预定编号</th>
                                            <th data-hide="phone">会员名字</th>
                                            <th data-hide="phone">预定菜单</th>
                                            <th data-hide="phone">预定桌号</th>
                                            <th data-hide="phone" style="display:none;">预定状态</th>
                                            <th data-hide="date">就餐时间</th>
                                            <th class="text-right" data-sort-ignore="true">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="x in list">
                                            <td style="display:none;">{{x.reservationId}}</td>
                                            <td>{{x.menberName}}</td>
                                            <td>{{x.orderId}}</td>
                                            <td>{{x.tableNum}}</td>
                                            <td style="display:none;">{{x.reservationState}}</td>
                                            <td>{{x.eatTime}}</td>
                                            <td class="text-right">

                                                <button class="btn-primary btn btn-sm" @click="update(x)"><span
                                                        class="glyphicon glyphicon-tag"></span> 编辑
                                                </button>
                                                <button class="btn-primary btn btn-sm" @click="del(x)"><span
                                                        class="glyphicon glyphicon-trash"></span> 删除
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div>
                                    一共{{total}}条数据,一共{{totalPage}}页,当前第{{curPage}}页
                                    <button class="btn btn-success btn-sm" type="button" @click="prePages()">上一页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="nextPages()">下一页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="indexPage()">首页
                                    </button>
                                    <button class="btn btn-success btn-sm" type="button" @click="endPage()">尾页</button>
                                    跳转到<input type="number" id="num" style="width: 40px" min="1" max="10"
                                              v-model="selectPage" @keyup="valNum">页
                                    <button class="btn btn-success btn-sm" type="button" @click="changePage()">跳转
                                    </button>
                                    <select v-model="reservationQuery.row" @change="selectRow">
                                        <option value="3">每页3条</option>
                                        <option value="5">每页5条</option>
                                        <option value="10">每页10条</option>
                                    </select>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框开始 -->
            <div id="one" class="modal fade" style="top:200px">
                <div class="modal-dialog">

                    <div class="modal-content">
                        <!--头部-->
                        <div class="modal-header">
                            <h4 align="center">{{title}}</h4>
                        </div>
                        <!--主题内容-->
                        <div class="modal-body">
                            <form role="form" class="form-horizontal">
                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">会员名字</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="reservation.menberName"
                                               placeholder="请输入会员名字">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">就餐时间</label>
                                    <div class=" col-sm-10">
                                        <input type="date" class="form-control" v-model="reservation.eatTime"
                                               placeholder="请输入就餐时间">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">预定餐单</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control" v-model="reservation.orderId">
                                        <button class="btn btn-primary btn-sm" type="button" @click="customerMenuData()">
                                            <span class="glyphicon glyphicon-zoom-in"></span> 选择菜单
                                        </button>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class=" col-sm-2 control-label">预定桌号</label>
                                    <div class=" col-sm-10">
                                        <input type="text" class="form-control"
                                               v-model="reservation.tableNum">
                                        <button class="btn btn-primary btn-sm" type="button" @click="tablesData()">
                                            <span class="glyphicon glyphicon-zoom-in"></span> 选择桌号
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--底部-->
                        <div class="modal-footer">
                            <button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span
                                    class="glyphicon glyphicon-remove"></span>关闭
                            </button>
                            <button class="btn btn-primary btn-sm" @click="saveReservation"><span
                                    class="glyphicon glyphicon-save"></span>保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!--桌位模态框-->
            <div id="tables" class="modal fade" style="top:200px">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!--头部-->
                        <div class="modal-header">
                            <h4 align="center">{{titles}}</h4>
                        </div>
                        <!--主题内容-->
                        <div class="modal-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                        <thead>
                                            <tr>
                                                <td style="display:none;">桌位表ID</td>
                                                <th data-hide="phone">桌位编号</th>
                                                <th data-hide="phone">桌位状态</th>
                                                <th class="text-right" data-sort-ignore="true">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="x in tablelist">
                                                <td style="display:none;">{{x.tableId}}</td>
                                                <td>{{x.tableNum}}</td>
                                                <td>
                                                    <select v-model="x.tableStatus" @chenge="selcetState">
                                                        <option value="无人">无人</option>
                                                        <option value="预定">预定</option>
                                                    </select>
                                                </td>
                                                <td class="text-right">
                                                    <button class="btn btn-primary btn-sm" @click="saveTables(x)"><span
                                                            class="glyphicon glyphicon-save"></span>保存
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                        <!--底部-->
                        <div class="modal-footer">
                            <button class="btn btn-primary btn-sm" type="button" @click="closeTables()"><span
                                    class="glyphicon glyphicon-remove"></span>关闭
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!--菜单模态框-->
            <div id="hotelMenu" class="modal fade" style="top:200px">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!--头部-->
                        <div class="modal-header">
                            <h4 align="center">{{titles}}</h4>
                        </div>
                        <!--主题内容-->
                        <div class="modal-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
                                        <thead>
                                            <tr>
                                                <th data-toggle="true">选择</th>
                                                <th data-toggle="true" style="display:none;">编号</th>
                                                <th data-hide="all" style="display:none;">所属部门id</th>
                                                <th data-hide="phone">菜名</th>
                                                <th data-hide="phone">价格</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="x in menuList">
                                                <td><input name="dishid" type="checkbox" value="${x.dishId}"/>{{x.dishId}}</td>
                                                <td style="display:none;">{{x.dishId}}</td>
                                                <td style="display:none;">{{x.departmentId}}</td>
                                                <td>{{x.dishName}}</td>
                                                <td>{{x.dishPrice}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--底部-->
                        <div class="modal-footer">
                            <button class="btn btn-primary btn-sm" type="button" @click="closeMenu()"><span
                                    class="glyphicon glyphicon-remove"></span>关闭
                            </button>
                            <button class="btn btn-primary btn-sm" @click="saveMenu"><span
                                    class="glyphicon glyphicon-save"></span>保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        new Vue({
            el: "#reservation",
            data: {
                list: [],
                tablelist:[],
                menuList:[],
                total: 0,//总条数
                totalPage: 0,//总页数
                selectPage: 1,//选择页数
                reservationQuery: { //查询对象
                    page: 1,
                    row: 3,
                    reservationId: null,
                    menberName: '',
                    orderId: '',
                    tableNum: '',
                    reservationState: '',
                    eatTime: ''
                },
                tablesQuery: { //查询对象
                    page: 1,
                    row: 3,
                    tablesId: null,
                    tableNum: '',
                    tableStatus: ''
                },
                menuQuery: { //查询对象
                    page: 1,
                    row: 3,
                    dishId: null,
                    departmentId: '',
                    dishName: '',
                    dishPrice: ''
                },
                prePage: 0,//上一页
                nextPage: 0,//下一页.
                curPage: 0,//当前页
                reservation: {
                    reservationId: 0,
                    menberName: '',
                    orderId: '',
                    tableNum: '',
                    reservationState: '',
                    eatTime: ''
                },
                tables: {
                    tableId: 0,
                    tableNum: '',
                    tableStatus: ''
                },
                menu: { //查询对象
                    dishId: 0,
                    departmentId: '',
                    dishName: '',
                    dishPrice: ''
                },
                title: "用户修改",
                titles: "用户修改"
            },
            methods: {
                loadData: function () {
                    var self = this;
                    $.ajax({
                        url: "/reservation/reservationList",//请求地址
                        type: "get",
                        data: self.reservationQuery,
                        dataType: "json",//返回的数据类型
                        success: function (data) {
                            console.log(data);
                            self.list = data.list;
                            self.total = data.total;
                            self.totalPage = data.totalPage;
                            self.prePage = data.prePage;
                            self.nextPage = data.nextPage;
                            self.curPage = data.curPage;
                        }
                    })
                },
                tablesData: function () {
                    $("#tables").modal("show")
                    var selfs = this;
                    $.ajax({
                        url: "/tables/tList",//请求地址
                        type: "get",
                        data: selfs.tablesQuery,
                        dataType: "json",//返回的数据类型
                        success: function (data) {
                            console.log(data);
                            selfs.tablelist = data.tablelist;
                        }
                    })
                },
                customerMenuData:function(){
                    $("#hotelMenu").modal("show")
                    var selfMenu = this;
                    $.ajax({
                        url: "/hotel_menu/tList",//请求地址
                        type: "get",
                        data: selfMenu.menuQuery,
                        dataType: "json",//返回的数据类型
                        success: function (data) {
                            console.log(data);
                            // alert(data.menuList);
                            selfMenu.menuList = data.menuList;
                        }
                    })
                },
                prePages: function () {//上一页
                    this.reservationQuery.page = this.prePage;
                    //刷新
                    this.loadData();
                },
                nextPages: function () {//上一页
                    this.reservationQuery.page = this.nextPage;
                    //刷新
                    this.loadData();
                },
                indexPage: function () {//首页
                    this.reservationQuery.page = 1
                    //刷新
                    this.loadData();
                },
                endPage: function () {//尾页
                    this.reservationQuery.page = this.totalPage;
                    //刷新
                    this.loadData();
                },
                changePage: function () {//跳转
                    if (this.selectPage > this.totalPage) {
                        this.reservationQuery.page = this.totalPage;
                    } else {
                        this.reservationQuery.page = this.selectPage;
                    }
                    //刷新
                    this.loadData();
                },
                selectRow: function () {//选择条数
                    this.reservationQuery.page = 1
                    //刷新
                    this.loadData();
                },
                selcetState:function(){
                    this.tablesQuery.tableStatus=1;
                },
                valNum: function () {
                    //定义正则表达式对象
                    var dd = /^[\u4e00-\u9fa5]{0,}$/
                    //如果输入的汉字，就显示1
                    if (dd.test(this.selectPage)) {
                        this.selectPage = 1
                    } else {
                        console.log("==" + this.selectPage)
                        //如果输入的值大于总页数，就回到最大值
                        if (this.selectPage > this.totalPage) {
                            this.selectPage = this.totalPage;
                        }
                    }
                },
                update: function (x) {//打开修改模态框
                    $("#one").modal("show")
                    //数据回显
                    this.reservation = x;
                    this.title = "用户修改";
                },
                del: function (x) {//打开新增模态框
                    var is = confirm("你确定要删除吗？")
                    if (is) {
                        var self = this;
                        $.ajax({
                            url: "/reservation/del",
                            type: "post",
                            contentType: "application/x-www-form-urlencoded",
                            data: {"id": x.reservationId},
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                alert(data.info);
                                if (data.info == "删除成功") {
                                    //刷新
                                    self.loadData();
                                }
                            }
                        })
                    }
                },
                add: function () {//打开新增模态框
                    $("#one").modal("show")
                    this.title = "用户新增";
                    //清空
                    this.reservation.reservationId = null;
                    this.reservation.menberName = ""
                    this.reservation.orderId = ""
                    this.reservation.tableNum = ""
                    this.reservation.reservationState = ""
                    this.reservation.eatTime = ""
                },
                saveReservation: function () {//保存
                    var url = "";
                    if (this.title == "用户修改") {
                        url = "/reservation/update";
                    } else {
                        url = "/reservation/add";
                    }
                    var self = this;
                    console.log(url);
                    $.ajax({
                        url: url,
                        type: "post",
                        contentType: "application/x-www-form-urlencoded",
                        data: self.reservation,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            alert(data.info);
                            if (data.info == "保存成功") {
                                //关闭模态框
                                $("#one").modal("hide")
                                //刷新
                                self.loadData();
                            }
                        }
                    })
                },
                closeWin: function () {//关闭模态框
                    $("#one").modal("hide")
                },
                saveTables:function(x){
                    var url = "";
                    if (this.titles == "用户修改") {
                        url = "/tables/update";
                    } else {
                        url = "/tables/add";
                    }
                    var selfs = this;
                    var self = this;
                    console.log(url);
                    console.log(x)
                    selfs.tables =x
                    self.reservation.tableNum=x.tableNum
                    $.ajax({
                        url: url,
                        type: "post",
                        contentType: "application/x-www-form-urlencoded",
                        data: selfs.tables,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            alert(data.info);
                            if (data.info == "保存成功") {
                                //关闭模态框
                                $("#tables").modal("hide")
                            }
                        }
                    })
                },
                closeTables:function () {
                    $("#tables").modal("hide")
                },
                saveMenu:function(x){
                    var url = "";
                    if (this.titles == "用户修改") {
                        url = "/customer-hotel/update";
                    } else {
                        url = "/tables/add";
                    }
                    var self = this;
                    console.log(url);
                    console.log(x)
                    selfs.tables =x
                    self.reservation.tableNum=x.tableNum
                    // alert(this.tablesData)
                    $.ajax({
                        url: url,
                        type: "post",
                        contentType: "application/x-www-form-urlencoded",
                        data: selfs.tables,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            alert(data.info);
                            if (data.info == "保存成功") {
                                //关闭模态框
                                $("#hotelMenu").modal("hide")
                            }
                        }
                    })
                },
                closeMenu:function () {
                    $("#hotelMenu").modal("hide")
                }
            },
            mounted() {
                //运行loadData函数
                this.loadData();
            }
        })
    </script>

</html>
